<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- todoList -->

    </div>
</body>

</html>
<script>
    //全局组件:

    //全局组件步骤
    //注意：全局组件定义一次之后，可以在任何地方使用
    //第一步定义:Vue.component定义全局组件
    //第二步使用组件
    Vue.component("Jch", {
        template: `
            <h1 @click="count++">我是全局组件{{count}}</h1>
          `,
        data() {
            return {
                count: 1
            }
        }
    });

    //定义todoList头部组件
    let ToHeader = Vue.extend({
        name: "Header",
        template: `
        <div class="header">
                <span>请你输入想要完成的事件</span>
                <input type="text">
                <Jch/>
        </div>
        `
    });

    let Tomain = Vue.extend({
        name: 'main',
        template: `
         <div class="main">
                <p>
                    <input type="checkbox">吃饭
                </p>
                <p>
                    <input type="checkbox">睡觉
                </p>
                <p>
                    <input type="checkbox">打豆豆
                </p>
                <Jch/>
            </div>
         `
    })

    let Tofooter = Vue.extend({
        name: 'footer',
        template: `
         <div class="footer">
                底部
                <Jch/>
            </div>
         `
    })
    //创建App根组件
    //定义一个App根组件
    let App = Vue.extend({
        name: "App",
        template: `
          <div class="container">
              <ToHeader/> 
              <Tomain/> 
              <Tofooter/>
              <Jch/>
          </div>
       `,
        components: {
            ToHeader,
            Tomain,
            Tofooter
        }
    });

    //创建VM
    let VM = new Vue({
        el: '#app',
        //注册
        components: {
            //注册子组件：ES6语法，一个对象KV一致省略V
            App
        },
        template: `
           <div>
              <App/>
              <Jch/>
            </div>
        `
    })
</script>